<template>
    <div class="monitor">
        <div class="monitor-sidebar">
            <el-menu
                    router
                    :default-active="activeIndex"
                    background-color="#515a6e"
                    text-color="#dddddd"
                    active-text-color="#ffffff">
                <el-submenu index="/monitor/complete">
                    <template slot="title">
                        <i class="el-icon-document"></i>
                        全量监控
                    </template>
                    <el-menu-item index="/monitor/complete/surplus">余票监控</el-menu-item>
                    <el-menu-item index="/monitor/complete/alternate">候补监控</el-menu-item>
                </el-submenu>
                <el-menu-item index="/monitor/server">
                    <i class="el-icon-menu"></i>
                    <span slot="title">服务器管理</span>
                </el-menu-item>
                <el-menu-item index="/monitor/database">
                    <i class="el-icon-menu"></i>
                    <span slot="title">数据库管理</span>
                </el-menu-item>
                <el-menu-item index="/monitor/product">
                    <i class="el-icon-menu"></i>
                    <span slot="title">同步产品管理</span>
                </el-menu-item>
            </el-menu>
        </div>
        <div class="monitor-detailed">
            <router-view></router-view>
            <el-backtop target=".el-table__body-wrapper">
                <i style="color: #2d8cf0" class="el-icon-top"></i>
            </el-backtop>
        </div>
    </div>
</template>

<script>
  import MenuUtil from "../../utils/MenuUtil";
  import {mapDict} from "../../api/manage/dict";
  import DictUtils from "../../utils/DictUtils";

  export default {
    name: "Monitor",
    data () {
      return {
        activeIndex: ""
      }
    },
    methods: {
      mapDict () {
        mapDict().then(result => {
          DictUtils.setDict(this, "manage", result.data.dictMap)
        })
      }
    },
    created () {
      console.log("path" + this.$route.path)
      this.activeIndex = MenuUtil.activeMenu(this.$route.path, 2, 2)
      console.log("activeIndex" + this.activeIndex)
      this.mapDict()
    }
  }
</script>

<style>
    .monitor {
        width: 100%;
        height: 100%;
        border-bottom: #cccccc 1px solid;
        float: left;
    }

    .monitor-sidebar {
        width: 200px;
        height: 100%;
        background-color: #515a6e;
        float: left;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .monitor-detailed {
        padding: 5px;
        width: calc(100% - 210px);
        height: calc(100% - 10px);
        float: left;
        overflow-x: hidden;
        overflow-y: auto;
    }

    /* iview样式重写 */
    .el-menu {
        border: none;
        user-select: none;
    }

    .monitor-sidebar > .el-menu {
        border: none;
    }

    .monitor-sidebar > .el-menu > li[class*="el-submenu is-active is-opened"] > div {
        background: #546580 !important;
    }
    .monitor-sidebar > .el-menu > li[class*="el-menu-item is-active"],
    .monitor-sidebar > .el-menu > li > ul > li[class*="el-menu-item is-active"]{
        border-left: #5cadff 5px solid;
        border-right: none;
        color: #fff;
        background: #6f83a2 !important;
    }

    .monitor-sidebar > .el-menu > .el-menu-item {
        height: 50px;
        line-height: 50px;
    }

    /*子模版样式*/
    .monitor-menu {
        width: 100%;
        height: 100%;
    }

    /* element ui样式重写 */
    .monitor-menu > .el-table {
        height: calc(100% - 35px) !important;
    }

    .monitor-menu > .el-table > .el-table__body-wrapper {
        height: calc(100% - 35px) !important;
    }

</style>
